<template>
  <div>
    <v-data-table
      :headers="headers"
      :items="hasTagItems"
      :search="search"
      :pagination.sync="pagination"
      :total-items="totalItems"
      :loading="loading"
      class="elevation-5"
      item-key="phone"
    >
      <template slot="items" slot-scope="props">
        <tr>
          <td class="table__expand pa-1">
            <v-btn @click="expand(props)" icon>
              <v-icon>{{props.expanded ? 'keyboard_arrow_down' :'keyboard_arrow_right'}}</v-icon>
            </v-btn>
          </td>
          <td class="text-xs-center">{{ props.item.username }}</td>
          <td class="text-xs-center">{{ props.item.class }}</td>
          <td class="text-xs-center">{{ props.item.cadre || '无' }}</td>
          <td class="text-xs-center">{{ props.item.phone }}</td>
          <td class="text-xs-center">{{ props.item.email }}</td>
          <td class="text-xs-center">{{ props.item.wechat }}</td>
          <td class="text-xs-center">{{ props.item.qq }}</td>
        </tr>
      </template>
      <template slot="expand" slot-scope="props">
        <v-card color="secondary" class="white--text ma-1" flat>
          <v-card-title>
            <v-avatar
              size="50px"
              class="white"
            >
              <img :src="'data:image/png;base64,' + props.item.avatar" alt="avatar">
            </v-avatar>
            <v-chip
              v-for="(tag,i) in tags"
              :key="tag._id"
              :close="props.item.tags[i].on"
              :class="props.item.tags[i].on ? 'teal' : 'grey'"
              @input="removeTagFromSb(props.item._id, props.item.tags[i]._id)"
              text-color="white">
              <v-avatar v-if="!props.item.tags[i].on" @click="addTagToSb(props.item._id, props.item.tags[i]._id)">
                <v-btn icon class="white--text">
                  <v-icon>lightbulb_outline</v-icon>
                </v-btn>
              </v-avatar>
              {{tag.name}}
            </v-chip>
          </v-card-title>
          <v-divider color="white"></v-divider>
          <v-card-text>
            <v-container grid-list-lg wrap>
              <v-layout row wrap>
                <v-flex v-for="(v,k) in props.item.archive" :key="k" xs12 sm6 md4 lg4>
                  <v-chip label text-color="white" color="primary">{{ vTranslate('archive.' + k)}}</v-chip>
                  <span class="ml-1 text--darken-2 body-2">{{v}}</span>
                </v-flex>
              </v-layout>
            </v-container>
          </v-card-text>

        </v-card>
      </template>
    </v-data-table>
  </div>
</template>

<script>
import { fetchMembers, fetchTags, addTagToSbInTeam, removeTagFromSbInTeam } from '@/api/team'
import { vTranslate } from '../../utils/i18n'

export default {
  data: () => ({
    search: '',
    totalItems: 0,
    items: [],
    tags: [],
    loading: true,
    pagination: {},
    headers: [
      { text: '', align: 'center', sortable: false, value: '', class: 'table__expand px-0' },
      { text: '名字', align: 'center', sortable: false, value: 'username' },
      { text: '班级', align: 'center', sortable: false, value: 'class' },
      { text: '职务', align: 'center', sortable: false, value: 'cadre' },
      { text: '手机', align: 'center', sortable: false, value: 'phone' },
      { text: '邮箱', align: 'center', sortable: false, value: 'email' },
      { text: '微信', align: 'center', sortable: false, value: 'wechat' },
      { text: 'QQ', align: 'center', sortable: false, value: 'qq' }
    ]
  }),
  watch: {
    pagination: {
      handler() {
        this.getDataFromApi()
      },
      deep: true
    }
  },
  computed: {
    hasTagItems() {
      return this.items.map(v => {
        const t = Object.assign({}, v)
        t.tags = this.tags.map(tag => ({
          _id: tag._id,
          name: tag.name,
          on: v.tags.includes(tag._id)
        }))
        return t
      })
    }
  },
  created() {
    fetchTags(this.$store.getters.team).then(res => {
      this.tags = res.data.tags
    })
  },
  mounted() {
    this.getDataFromApi()
  },
  methods: {
    vTranslate,
    addTagToSb(userId, tagId) {
      addTagToSbInTeam(tagId, userId, this.$store.getters.team).then(res => {
        if (res.status === 200) {
          for (const item of this.items) {
            if (item._id === userId) {
              item.tags.push(tagId)
              this.$notify.success('成功添加管理标签')
              break
            }
          }
        } else this.$notify.error('添加管理标签失败')
      })
    },
    removeTagFromSb(userId, tagId) {
      removeTagFromSbInTeam(tagId, userId, this.$store.getters.team).then(res => {
        if (res.status === 200) {
          for (const item of this.items) {
            if (item._id === userId) {
              item.tags = res.data.tags
              this.$notify.success('成功删除管理标签')
              break
            }
          }
        } else this.$notify.error('删除管理标签失败')
      })
    },
    expand(props) {
      props.expanded = !props.expanded
    },
    getDataFromApi() {
      this.loading = true
      const { page, rowsPerPage } = this.pagination
      fetchMembers(this.$store.getters.team, page, rowsPerPage).then(res => {
        this.items = res.data.items
        this.totalItems = res.data.total
        this.loading = false
      })
    }
  }
}
</script>

<style>
.table__expand {
  max-width: 20px;
  width: 20px;
}
</style>
